import React, { Component } from 'react';
import { EditorState, convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
// import htmlToDraft from 'html-to-draftjs';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
// import {  richTextEditorWrapper} from "./style";
import './style.css'


class HjRichTextEditor extends Component {
  state = {
    editorState: EditorState.createEmpty(),
  }

  onEditorStateChange =(editorState) => {
    this.setState({
      editorState,
    });
  };

  // 获取富文本编辑器的内容
    getRichTxetValue = ()=>{
      const { editorState } = this.state;
      return draftToHtml(convertToRaw(editorState.getCurrentContent()))
    }
  render() {
    const { editorState } = this.state;
    return (
     
      <div>
        <Editor
          editorState={editorState}
          wrapperClassName="demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={this.onEditorStateChange}
        />
       
      </div>
    );
  }
}

export default HjRichTextEditor


/* 
回显详情数据
import { EditorState, ContentState } from 'draft-js';
import htmlToDraft from 'html-to-draftjs';

const blocksFromHtml = htmlToDraft(this.props.content);
const { contentBlocks, entityMap } = blocksFromHtml;
const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
const editorState = EditorState.createWithContent(contentState); 
*/